<template>
  <div class="task-all-con table-gl-w">
    <div class="search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-space>
            <div class="common-text">
              <span>数据统计时间： </span>
              <span>2023-11-23 12:34</span>
            </div>
            <a-button class="gray-outline" @click="upload">导出</a-button>
          </a-space>
        </template>
        <template #tableBody>
          <a-table size="mini" :summary="summary" class="table-two-line" :bordered="{ headerCell: true }" @sorter-change="sortChange" :data="tableList" :loading="loading" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="序号" #cell="{ rowIndex }" :width="50">{{ rowIndex + 1 }}</a-table-column>
              <!-- <a-table-column title="日期" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'] }" data-index="gmtFinish">
                {{ $setTime(record.gmtFinish, 'YYYY-MM-DD') }}
              </a-table-column> -->
              <a-table-column title="执行人" #cell="{ record }" :width="100">{{ record.executerName }}</a-table-column>
              <a-table-column title="部门" #cell="{ record }" :width="100">{{ record.executerDeptName }}</a-table-column>
              <a-table-column title="未开启子任务" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'] }" data-index="notStartNum">
                {{ record.notStartNum }}
              </a-table-column>
              <a-table-column title="已开启子任务" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'] }" data-index="startedNum">
                {{ record.startedNum }}
              </a-table-column>
              <a-table-column title="已完成子任务" #cell="{ record }" :width="130" :sortable="{ sortDirections: ['ascend', 'descend'] }" data-index="finishedNum">
                {{ record.finishedNum }}
              </a-table-column>
              <a-table-column title="今日完成子任务" #cell="{ record }" :width="130" data-index="todayFinishNum">
                {{ record.todayFinishNum }}
              </a-table-column>
              <a-table-column title="昨日完成子任务" #cell="{ record }" :width="130" data-index="yesterdayFinishNum">
                {{ record.yesterdayFinishNum }}
              </a-table-column>
            </template>
            <template #summary-cell="{ column, record, rowIndex }">
              <div>{{ record[column.dataIndex] }}</div>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <!-- <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { getOrganizesUser } from '@/api/system'
  import { findDeptList } from '@/api/product'
  import { findTaskNodeExecuterStatvo, exportTaskNodeExecuterStat } from '@/api/task'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import _ from 'lodash-es'
  const emits = defineEmits(['save'])

  const filterItem: any = ref([
    {
      key: 'executerId',
      label: '任务执行人',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [],
      attrs: {
        'allow-clear': true,
      },
    },
    {
      key: 'executerDeptId',
      label: '执行人部门',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: [],
      attrs: {
        'allow-clear': true,
      },
    },
  ])
  let tableList = ref([])
  let loading = ref(false)
  let pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })
  let searchValue: any = ref({})

  let time = ref('')

  const searchByVal = (info: any) => {
    searchValue.value = _.cloneDeep(info)
    if (searchValue.value.startDate) {
      searchValue.value.startDate = new Date(`${searchValue.value.startDate} 00:00:00`).valueOf()
      searchValue.value.endDate = new Date(`${searchValue.value.endDate} 23:59:59`).valueOf()
    }
    getList()
  }

  const getUser = async () => {
    let params = {
      depart: false,
      needRole: false,
      pageNum: 1,
      pageSize: 1000,
    }
    const res: any = await getOrganizesUser(params)
    let arr = res?.data?.records || []
    filterItem.value[0].optionItems = arr.map((e: any) => {
      return {
        label: e.userName,
        value: e.id,
      }
    })
  }

  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }

  const sortChange = (item: any, extra: any) => {
    if (extra) {
      searchValue.value.sortField = item
      searchValue.value.sortAsc = extra == 'ascend' ? true : false
    } else {
      searchValue.value.sortField = ''
      searchValue.value.sortAsc = ''
    }
    getList()
  }

  const getList = async () => {
    let params = {
      ...searchValue.value,
      // pageNum: pageNation.value.pageNum,
      // pageSize: pageNation.value.pageSize,
    }
    loading.value = true
    const res: any = await findTaskNodeExecuterStatvo(params)
    tableList.value = res?.data?.statList || []
    time.value = res?.data?.gmtLastUpdate || ''
    pageNation.value.total = res?.data?.total || 0
    loading.value = false
  }

  const organizesList = async () => {
    const res = await findDeptList()
    let arr = res?.data || []
    filterItem.value[1].optionItems = arr.map((e: any) => {
      return {
        label: e.deptName,
        value: e.id,
      }
    })
  }

  const summary = () => {
    let countData = {
      notStartNum: 0,
      startedNum: 0,
      finishedNum: 0,
      todayFinishNum: 0,
      yesterdayFinishNum: 0,
    }
    tableList.value.forEach((record: any) => {
      countData.notStartNum += record.notStartNum
      countData.startedNum += record.startedNum
      countData.finishedNum += record.finishedNum
      countData.todayFinishNum += record.todayFinishNum
      countData.yesterdayFinishNum += record.yesterdayFinishNum
    })

    return [
      {
        executerDeptName: '合计',
        ...countData,
      },
    ]
  }

  const upload = async () => {
    const res = await exportTaskNodeExecuterStat()
    if (res) {
      emits('save')
    }
  }

  onMounted(() => {
    getList()
    getUser()
    organizesList()
  })
</script>

<style lang="less" scoped>
  .task-all-con {
    height: calc(100vh - @menuAndTabHeight);
  }
</style>
